<script setup lang="ts">
//进行时间选择，双向绑定选中的时间
/// 提供的数据有两个，1 日期：字符串， 2.时间范围：对象 ，开始时间-结束时间。 双向数据绑定
// 加一个事件，选中开始时间和结束时间的事件

import {computed, ref} from "vue";
import {getTime} from "@/http/reservation/reservation";


const date = defineModel('date')
const timePeriod = defineModel('timePeriod')

// 时间列表
const dateList=ref([])
const weeks = [ '星期日','星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
getTime().then(res => {
    console.log(res)
    if (res.code == 200) {
        dateList.value = res.data.map(item => ({
            ...item,
            weekDay: weeks[new Date(item.date).getDay()]
        }))
        date.value = dateList.value[0].date
    }
})

// 选中的日期的时间列表
const timeSpanList = computed(() => {
    if (dateList.value) {
        return dateList.value.find(item => item.date === date.value)?.timeSpanList
    } else {
        return []
    }
})


</script>

<template>
    <div class="dateTime">
        <!--        选择日期-->
        <div class="date">
            <div class="title">
                <van-icon name="calendar-o" size="20" style="margin-right: 3px"/>
                <span>选择日期</span>
            </div>
            <div class="week">
                <div :class="item.usable?'eachDay':'disabled'" v-for="(item,index) in dateList" :key="index"
                     @click="date=item.date"
                     :style="{'background': item.date===date ? '#9e75f5':''}">
                    <div class="word">{{ item.weekDay }}</div>
                    <div class="num">{{ item.date.slice(8) }}</div>
                </div>
            </div>
        </div>
                选择时间
        <div class="time">
            <div class="title">
                <van-icon name="clock-o" size="20" style="margin-right: 3px"/>
                <span>选择时间</span>
            </div>
            <div class="clock">
                <div v-for="(item,index) in timeSpanList" :key="index"
                     @click="timePeriod = item"
                     :class="item.usable?'eachClock':'disabled'"
                     :style="{'background': timePeriod == item? '#9e75f5':''}">
                    <p>{{ item.startTime }}——{{ item.endTime }}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">
.dateTime {
  width: 90%;
  margin: 5vh auto;

  .week {
    margin: 3vh auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    text-align: center;

    .eachDay {
      background-color: white;
      width: 13%;
      height: 7vh;
      box-sizing: border-box;
      padding: 3px;
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .word {
        font-size: 12px;
      }
    }

    .eachDay:visited {
      background-color: #CEAFF8;
    }

    .disabled {
      background-color: #C4C4C4;
      width: 13%;
      height: 7vh;
      box-sizing: border-box;
      padding: 3px;
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .word {
        font-size: 12px;
      }
    }

    .dateChecked {
      background-color: #CEAFF8;
      color: white;
      width: 14%;
      height: 7vh;
      box-sizing: border-box;
      padding: 3px;
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .word {
        font-size: 12px;
      }
    }
  }

  //选择时间
  .clock {

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;

    .eachClock {
      text-align: center;
      margin-top: 2vh;
      background-color: white;
      width: 48%;
      border-radius: 5px;
    }

    .eachClock:visited {
      background-color: #CEAFF8;
    }

    .disabled {
      text-align: center;
      margin-top: 2vh;
      background-color: #C4C4C4;
      width: 48%;
      border-radius: 5px;
    }

    .clockChecked {
      border-radius: 5px;
      text-align: center;
      margin-top: 2vh;
      background-color: #CEAFF8;
      color: white;
    }
  }
}
</style>